<template>
  <div class="advance-management-details">
    <a-spin :spinning="loading">
      <a-form :model="formState" autocomplete="off">
        <div class="base-info">
          <div class="title">预报信息</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                <template v-if="item.name === 'preOrderApplyTime'">
                  {{ dayjs(Number(formState[item.name])).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
                <template v-else-if="item.name === 'expectedPickupTime'">
                  {{ dayjs(Number(formState[item.name])).format("YYYY-MM-DD HH:mm:ss") }}
                  <a-button @click="modifyTimeHandle" v-if="type === 2" type="link">修改</a-button>
                </template>
                <template v-else-if="item.name === 'warehouseName'">
                  {{ formState[item.name] }}
                  <a-button @click="modifyWarehouseHandle" v-if="type === 2" type="link">修改</a-button>
                </template>
                <template v-else-if="item.name === 'splicingPickupAddress'">
                  {{ formState[item.name] }}
                  <a-button @click="modifyPickupAddressHandle" v-if="type === 2" type="link">修改</a-button>
                </template>
                <template v-else-if="item.name === 'splicingWarehouseAddress'">
                  {{ formState[item.name] }}
                </template>
                <template v-else-if="item.name === 'shippingMethod'">
                  <span v-if="formState.shippingMethod === 0">上门取件</span>
                  <span v-if="formState.shippingMethod === 1">自送入仓</span>
                </template>
                <template v-else>{{ formState[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div class="waybill-info">
        <div class="title">运单信息</div>
        <vxe-table border show-overflow="title" height="300" :row-config="{ isHover: true }" :data="formState.bizPreOrderShipmentReqDtoList" :scroll-y="{ enabled: true, gt: 50 }">
          <vxe-column type="seq" width="50"></vxe-column>
          <vxe-column minWidth="140" field="waybillNum" title="运单号"></vxe-column>
          <vxe-column minWidth="70" field="itemNumber" title="件数"></vxe-column>
          <vxe-column minWidth="70" field="countryRegionName" title="国家/地区"></vxe-column>
          <vxe-column minWidth="160" field="channelName" title="渠道"></vxe-column>
          <vxe-column minWidth="120" field="warehouseCode" title="仓库代码"></vxe-column>
          <vxe-column minWidth="120" field="productName" title="品名"></vxe-column>
          <vxe-column minWidth="100" field="materialQualityName" title="材质"></vxe-column>
          <vxe-column minWidth="120" field="remark" title="备注"></vxe-column>
          <vxe-column v-if="type === 2" minWidth="70" field="action" title="操作">
            <template #default="{ row }">
              <a-button @click="modifyWaybillHandle(row)" type="link">修改</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="img-info">
        <div class="title">预报图片</div>
        <div class="img-list">
          <a-image v-for="(item, index) in formState.bizFileDetailReqDtoList" :key="index" :width="100" :height="100" :src="item.url" />
        </div>
      </div>
    </a-spin>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import ModifyTime from "../modifyTime/index.vue";
import ModifyWarehouse from "../modifyWarehouse/index.vue";
import ModifyPickupAddress from "../modifyPickupAddress/index.vue";
import ModifyWaybill from "../modifyWaybill/index.vue";
export default {
  components: {
    ModifyTime,
    ModifyWarehouse,
    ModifyPickupAddress,
    ModifyWaybill
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import dayjs from "dayjs";
import ModalHook from "@/hook/modalHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: ClientAdvanceManagement.ListRows;
  }>(),
  {}
);
const { visible, type, passData } = toRefs(props);
const { formState, init, loading, formItemColumn, dialogOpts } = InitHook();
const { modifyWaybillHandle, modifyTimeHandle, modifyWarehouseHandle, modifyPickupAddressHandle } = OperationHook({ dialogOpts, formState });
const { dialogSubmitHandle } = ModalHook({
  dialogOpts,
  callBack: () => init(passData.value.id)
});
init(passData.value.id);

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init(passData.value.id);
  }
);
</script>
<style lang="stylus" scoped>
.advance-management-details{
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }
    .base-info{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
    }
    .waybill-info{
        .title{
            padding: 0 0 12px 0;
        }
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        margin-top: 12px;
        padding: 12px;
    }
    .img-info{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        margin-top: 12px;
        .img-list{
            padding: 0 12px 12px 12px;
        }
    }
}
</style>
